<!DOCTYPE html>
<html>

    <head>
        <title>记事本</title>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
        <meta name="viewport" content="width-device-width,initial-scale=1"/>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <link rel="stylesheet" type="text/css" href="index.css" />
    </head>
    <body onload="reload">
        <!-- main part -->
        <section id="app">
            <!-- input box -->
            <header class="header">
                <h1>TodoList</h1>
                <input placeholder="Task to do:"
                    autofocus="autofocus" autocomplete="off" 
                    @keyup.enter="addList" v-model="element" class=""/>
            </header>
            <!-- reload data -->
            <!-- list part -->
            <section class="nav">
                <div>
                    <!-- <input type="button" @click="readList" v-if="isRead" value="load"/> -->
                    <!-- <input type="button" @click="saveList" value="save"/> -->
                    <p>Items:</p>
                    <p v-show="list.length==0"> have no items now</p>
                </div>
                <ul>
                    <li v-for="(item,index) in reverseList">
                        <span>{{ index+1 }}</span>
                        <label>{{ item }}</label>
                        <button @click="removeList(index)">X</button>
                    </li>
                </ul>
                <footer v-show="list.length!=0">
                    <span v-if="list.length!=0">
                        <strong>{{ list.length }}</strong> items left
                    </span>
                    <button @click="clear" v-show="list.length!=0">Clear</button>
                </footer>
            </section>
            <section class="section">
                <p v-show="!infoChange">now {{ info }} exist</p>
                <input ref="inputVal" type="text" v-show="infoChange" 
                    v-model="preInfo" @keyup.enter="setInfo" @keyup.esc="desCancel"
                    onfocus=""/>
                <button @click="showText" v-show="!infoChange">Edit</button>
                <button @click="clearInfo" v-show="!infoChange">Clear</button>
            </section>
            <footer class="footer">
                <div>carpe diem</div>
            </footer>
        </section>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>